<!--社区列表-->
<template>
    <div>
           <el-row>
               <el-col :span='6'>
                  <el-input v-model="name">
                    <template slot="prepend">姓名</template>
                  </el-input>
               </el-col>
               <el-col :span='16' style="margin-left:20px">
                 <el-button type="primary" plain @click="search">筛选</el-button>
                 <el-button type="success" plain :loading="loading" @click="pull">{{button_name}}</el-button>
                 <i class="el-icon-check" v-if="qy_code!='' && qy_code!=null">企业微信已登录</i>
               </el-col>
            </el-row>
            <el-table class="yx_table" border :data="memberlist">
                <el-table-column label="序号" width="100">
                     <template slot-scope="scope">{{(scope.$index+1)+(current_page-1)*20}}</template>
                </el-table-column>
                <el-table-column prop="thumb_avatar" label="头像" width="100">
                    <template slot-scope="scope">
                          <el-avatar :size="50" :src="scope.row.thumb_avatar"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="gender" label="性别" width="100">
                </el-table-column>
                <el-table-column prop="department_name" label="部门" width="150">
                </el-table-column>
                <el-table-column prop="position" label="职务" width="150">
                </el-table-column>
                <el-table-column prop="mobile" label="手机号" width="180">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                </el-table-column>
                <!-- <el-table-column  label="操作">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="查看" placement="bottom-start">
                            <el-button type="info" icon="el-icon-notebook-1" @click="edit(scope.row.id,0)" circle></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column> -->
            </el-table>
            <el-pagination class="yx_page"
                           background
                           @current-change="handle_current_change"
                           @size-change="handle_size_change"
                           :current-page="current_page"
                           :page-sizes="page_sizes"
                           :page-size="page_size"
                           layout="prev, pager, next,sizes, total"
                           :total="total_count">
            </el-pagination>
            <el-dialog title="企业微信授权登录" :visible="showDialog" destroy-on-close @close="handleClose" width="30%">
              <iframe :src="qy_src" frameborder="0" width="100%" height="400"></iframe>
            </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'MemberList',
        inject:['reload'],
        data() {
            return {
                current_page:1,
                page_size:20,
                name:'',
                loading:false,
                button_name:'拉取组织架构',
                showDialog:false,
                qy_src:''
            }
        },
        methods: {
            getList(){
                var send_data={
                    api_token:this.$store.getters.getSessionId,
                    name:this.name,
                    d_id:this.$store.getters.getDepartCheckedId,      //获取当前部门id号
                    current_page:this.current_page,
                    page_size:this.page_size,
                }
                this.$store.dispatch('loadMemberList',send_data);
            },
            search(){
                this.current_page=1;
                this.getList();
            },
            handleClose(){
               this.showDialog=false;
               this.qy_src='';
            },
            //拉取组织架构
            pull(){
                //拉取组织架构先调用企业微信登录
                //if(this.qy_code!='' && this.qy_code!=null){
                    this.loading=true;
                    this.button_name='正在拉取，请稍候';
                    let send_data={
                        'wxapp_api_token':this.$store.getters.getSessionId,
                        'code':this.qy_code
                    };
                    this.$store.dispatch('loadDepartData',send_data);
                /* }else{
                    let redirect_uri='https://u-voicechat.amwaynet.com.cn/dist/depart/memberlist';
                    //let redirect_uri='https://amway-dev.wshoto.com/java/depart/memberlist';
                    let encode_redirect_uri=encodeURIComponent(redirect_uri);
                    let state_id=this.$store.getters.getSessionId;
                    this.qy_src="https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=ww17b29c9ad358221d&agentid=1000010&redirect_uri="+redirect_uri+"&state="+state_id;
                    this.showDialog=true;
                } */
            },
            edit(id,edit_type){
                this.$router.push({
                    name:'memberedit',
                    params:{id:id,edit_type:edit_type}
                });
            },
            //跳转页
            handle_current_change(current_page){
                //当前页码数
                this.current_page=current_page;
                this.getList();
            },
            //修改条数
            handle_size_change(page_size){
                this.current_page=1;
                this.page_size=page_size;
                this.getList();
            }
        },
        created() {

           this.getList();
        },
        computed:{
            memberlist(){
                return this.$store.getters.getMemberList;
            },
            total_count(){
                return this.$store.getters.getMemberTotalCount;
            },
            page_sizes(){
                return this.$store.state.page_sizes;
            },
            getDepartDataStatus(){
                return this.$store.getters.getDepartDataStatus;
            },
            qy_code(){
                return this.$store.getters.getQyCode;
            }
        },
        watch:{
            '$route'(to,from){
                this.current_page=1;
                this.getList();
            },
            memberlist(val){
               if(val.length>0){
                  let status_hash={
                     1:'已激活',
                     2:'已禁用',
                     4:'未激活',
                     5:'退出企业'
                  };
                  for(let i in val){
                     let status=val[i]['status'];
                     val[i]['status']=status_hash[status];
                  }
               }
            },
            //拉取组织架构成功
            getDepartDataStatus(val){
                this.loading=false;
                this.button_name='拉取组织架构';
                let that=this;
                if(val==1){
                    this.$message({
                        message:'组织架构拉取成功',
                        type:'success',
                        duration:1000
                    });
                    //成功之后将页面切换到首页
                    this.current_page=1;
                }else if(val==0){
                    this.$message({
                        message:'组织架构拉取失败',
                        type:'error',
                        duration:2000
                    });
                }
                that.$store.commit('setDepartDataStatus',-1);
                that.reload();
            }
        }
    }
</script>

<style>
     @import url('../../assets/css/table.css');
</style>
